<template>
  <div>
    <div gap="10px 10px">
      <div>
        <div class="container">
          <div class="box">
            <p class="center">
              <img src="../../static/logo.png">
            </p>
          </div>
        </div>
      </div>
      <h3 style="text-align: center;">
        欢迎使用凯控管理系统
      </h3>
      <h6>版本:{{ appVersion }},{{ platform }}</h6>
      <cell-group>
        <field v-if="platform!=='web'"
               v-model="hurl"
               required
               clearable
               label="域名"
               left-icon="wap-home"
               type="text"
               placeholder="请输入服务器域名"
        />
        <field
          v-model="name"
          required
          clearable
          label="账号"
          left-icon="contact"
          type="text"
          placeholder="请输入用户名"
        />
        <field
          v-model="password"
          required
          clearable
          label="密码"
          left-icon="closed-eye"
          type="password"
          placeholder="请输入密码"
        />
      </cell-group>
      <div style=" text-align:center">
        <button
          type="primary"
          loading-type="spinner"
          round
          size="large"
          style="max-width: 60%;justify-content: center"
          @click="submit"
        >
          登录
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  import {login} from '../api/http'
  import {mapActions, mapState} from 'vuex'

  import {Button, CellGroup, Field} from 'vant'

  export default {
    name: 'Login',
    components: {
      CellGroup, Field, Button
    },
    data: function () {
      return {
        name: '',
        password: '',
        hurl: '',
        appVersion: 'appVersion',
        platform: 'web'
      }
    },
    computed: {
      ...mapState({
        route: state => state.route,
        path: state => state.route.path,
        isLoading: state => state.app_root.isLoading,
        app_root: state => state.app_root
      })
    },
    mounted: function () {
      this.hurl = localStorage.getItem('remote_url')
      this.name = localStorage.getItem('username')
      this.password = localStorage.getItem('password')
      document.title = '系统登录'
      this.$emit("ShowNav", false)
      this.$emit("ShowTabbar", false)
    },
    methods: {
      ...mapActions('d2admin/account', [
        'login'
      ]),
      submit: function () {
        let self = this
        this.login({
          site: this.hurl,
          name: this.name,
          password: this.password
        })
          .then(() => {
            // 重定向对象不存在则返回顶层路径
            this.$router.replace(this.$route.query.redirect || '/')
          })
      }
    }
  }

</script>
<style scoped>
  .container {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
  }

  .center {
    text-align: center;
    padding-top: 20px;
    color: #fff;
    font-size: 18px;
  }

  .center img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #ececec;
  }

  .box {
    /*background-image: url("https://odoo.net.cn/uploads/profile/6861-profileimg.jpg");*/
    border-radius: 5px;
    font-family: sans-serif;
    text-align: center;
    line-height: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 100%;
    max-height: 100%;
    padding: 20px 40px;
  }
</style>
